<template>
  <div style=" display: inline-block;  margin: 10px;">
    <el-button v-for="(item, index) in buttons" :key="index"
    :style="{ backgroundColor: item.color }"
    @click="changeColor(index)">
      {{ item.label }}
    </el-button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            buttons:[]
        }
    },
    created() {
        for(let i=0;i<=199;i++) {
            this.buttons.push({
                label: i+1,
                color: this.otherColor()
            })
        }
    },
    methods: {
        // 随机颜色
        otherColor() {
           return '#' + Math.floor(Math.random()*16777215).toString(16);
        },
        // 改变颜色
        changeColor(index) {
            this.buttons[index].color = this.otherColor();
        }
    }

}
</script>

<style scoped>
.el-button {
    margin: 5px;
}
</style>